<template>
  <div class="box">
    <div>
      <span tyle="margin-left:10px">商品名称</span
      ><el-input
        style="width: 350px; margin-left: 10px"
        placeholder="商品名称"
        v-model="name"
      />
    </div>
    <div style="margin-top: 30px">
      <span>商品分类</span>
      <el-select
        v-model="value"
        placeholder="请选择商品分类"
        style="width: 350px; margin-left: 10px"
      >
        <el-option
          v-for="(categories,index) in options"
          :key="index"
          :label="categories.cateName"
          :value="categories.cateName"
        >
        </el-option>
      </el-select>
    </div>
    <div style="margin-top: 30px">
      <span>商品价格</span>
      <el-input-number
        v-model="price"
        @change="handleChange"
        :min="1"
        
        label="描述文字"
        style="margin-left: 10px"
      ></el-input-number>
    </div>

    <div style="margin-top: 30px; display: flex">
      <span style="line-height: 150px">商品图片</span>
      <el-upload
       class="avatar-uploader"
        action="http://127.0.0.1:5000/goods/goods_img_upload"
         :show-file-list="false"
        :on-success="headersuccess"
        style="margin-left: 10px"
      >
       <img v-if="callbakurl" :src="callbakurl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <div style="margin-top: 30px; display: flex">
      <span>商品描述</span>
      <el-form style="margin-left: 10px">
        <el-input
       
          type="textarea"
          v-model="goodsDesc"
          style="width: 350px; height: 50px"
         
        ></el-input>
        <!-- </el-form-item> -->
      </el-form>
    </div>
    <el-button type="primary" style=" margin-top: 30px; margin-left: 80px" @click="funaddshop">添加商品</el-button>
  </div>
</template>

<script>
import {allshopsort,addshop} from '@/apis/user'
export default {
  data() {
    return {
      //商品价格
      price: 1,
      //   照片
      imgUrl: "",
      dialogVisible: false,
      options: "",
      goodsDesc: "",
      value:"",
      name:'',
      callbakurl:''
    

    };
  },
  created(){
    //查询所有商品分类
    allshopsort().then(res=>{
      this.options=res.data.categories
      //  console.log(this.options); 
    })
   
  },
  methods: {
      headersuccess(res,file) {
      if(res.code==0){
          this.callbakurl = URL.createObjectURL(file.raw);
        // this.$bus.emit('headersuccess',res)
        this.imgUrl=res.imgUrl
        // console.log(res);
      }
    },
    handleChange(value) {
      console.log(value);
    },
    //照片

    //添加商品
    funaddshop(){
      console.log(this.name,this.value,this.price,this.goodsDesc,this.imgUrl);
      addshop({
      name:this.name,
      category:this.value,
      price:this.price,
      goodsDesc:this.goodsDesc,
      imgUrl:this.imgUrl
      }).then(res=>{
       if(res.data.code==0){
          this.$message({
          message: '添加商品成功',
          type: 'success'
        });
       }
      })
    }
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  line-height: 30px;
  text-align: left;
}

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>